<template>
  <div class="container">
    <!-- tool start -->
    <el-form :model="formInline" label-width="120px" @keyup.enter.native="search">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.ordernumber')">
            <el-input maxlength="30" show-word-limit v-model="formInline.ordercode" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.out.storeordercode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.storeordercode" placeholder></el-input>
          </el-form-item>
        </el-col>
        <!-- 暂时屏蔽城市查询 -->
        <!-- <el-col :span="8">
          <el-form-item :label="$t('m.out.cityname')">
            <el-input maxlength="20" show-word-limit v-model="formInline.cityname" placeholder></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item :label="$t('m.packaging.packagingcode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.packagingcode" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.packaging.expresscode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.expresscode" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.out.tsareaid')">
            <el-input maxlength="20" show-word-limit v-model="formInline.tsareacode" placeholder></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24" align="right">
          <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
          <el-button @click="handlePrint" v-if="hasPermission('print')">{{$t('m.print')}}</el-button>
          <el-button @click="deliveryNotePrint" v-if="hasPermission('printdeliverynote')">{{$t('m.packaging.printdeliverynote')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- tool end -->

    <!-- table start -->
    <el-table
      ref="table"
      stripe
      empty-text
      fit
      v-loading="tableLoading"
      class="table-wrap single-select-table"
      :data="tableData"
      :row-style="tableRowStyle"
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
      @selection-change="handleSingleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="55"></el-table-column>
      <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>

      <el-table-column align="center" prop="packagingcode" :label="$t('m.packaging.packagingcode')">
        <template slot-scope="scope">
          <template v-if="hasPermission('table-packagingcode')">
            <el-button @click.stop="getPackagingDetail(scope.row)" type="text">{{scope.row.packagingcode}}</el-button>
          </template>
          <template v-else>{{ scope.row.packagingcode }}</template>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="tsareacode" :label="$t('m.packaging.tsareacode')"></el-table-column>
      <el-table-column align="center" prop="modifier" :label="$t('m.packaging.packer')"></el-table-column>
      <el-table-column align="center" prop="expresscode" :label="$t('m.packaging.expresscode')"></el-table-column>
      <el-table-column align="center" prop="quantity" :label="$t('m.packaging.quantity')"></el-table-column>
      <el-table-column align="center" prop="ordercode" :label="$t('m.in.ordernumber')" >
        <template slot-scope="scope">
          <template v-if="hasPermission('table-ordercode')">
            <el-button type="text" @click.stop="
              $router.push({
              path: 'order/orderInfo',
              query: { orderid: scope.row.orderid },})">
              {{ scope.row.ordercode }}
            </el-button>
          </template>
          <template v-else>{{ scope.row.ordercode }}</template>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="storeordercode" :label="$t('m.packaging.storeordercode')"></el-table-column>
      <el-table-column align="center" prop="state" :label="$t('m.state')" :formatter="stateFormatter"></el-table-column>
      <el-table-column align="center" prop="ordertype" :label="$t('m.out.ordertype')" :formatter="ordertypeFormatter"></el-table-column>
      <el-table-column align="center" prop="totalnumber" :label="$t('m.packaging.totalOrders')"></el-table-column>
      <el-table-column align="center" prop="consignee" :label="$t('m.out.consignee')" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="contact" :label="$t('m.out.consignee')+$t('m.out.contact')" show-overflow-tooltip></el-table-column>
      <!-- <el-table-column align="center" prop="regionname" :label="$t('m.out.provincename')" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="cityname" :label="$t('m.out.cityname')" show-overflow-tooltip></el-table-column> -->
      <el-table-column align="center" prop="packagingdate" :label="$t('m.packaging.packagingdate')" :formatter="packagingdate"></el-table-column>

    </el-table>
    <el-pagination background layout="sizes, prev, pager, next, jumper" :page-sizes="pageSizeList" :page-size="rowSize" :current-page="page" :total="totalRows" @current-change="currentChange" @size-change="handleSizeChange"></el-pagination>
    <!-- table end -->
    <packagingDetailsPopup
      v-if="packagingDetailsPopupVisible"
      :dialogVisible="packagingDetailsPopupVisible"
      :detail="packagingDetail"
      @print="detailPrint"
      @close="packagingDetailsPopupVisible=false">
    </packagingDetailsPopup>
    <!-- 打包单详情 dialog 结束 -->
  </div>
</template>
<script>
import { getLodop } from '@/utils/LodopFuncs'
import common from '../../../utils/common'
import { printInfo } from '@/utils/printReceipts'
export default {
  name:'packagingHistory',
  data(){
    return {
      formInline:{
        ordercode:'', // 订单号
        storeordercode:'', // 电商订单号
        ordertype:'', // 订单类型
        tsareacode:'', //分拣位置
        cityname:'', //城市
        packagingcode:'', //打包单号
        expresscode:'' //主运单号
      },

      tableData:[],
      packagingDetailsPopupVisible:false
    }
  },
  activated(){
    this.getData()
  },
  components:{
    packagingDetailsPopup:()=>import('@/components/packaging/packaging-details-popup')
  },
  computed:{
    ordertypeOptions(){
      return [ // 订单类型
        { id:'', label:this.$t('m.all') },
        { id:1, label:this.$t('m.out.ordertype1') },
        { id:2, label:this.$t('m.out.ordertype2') }
      ]
    },
    stateOptions(){
      return [ // 状态
        { value:'', label:this.$t('m.all') },
        { value:2, label:this.$t('m.packaging.state2') },
        { value:3, label:this.$t('m.packaging.state3') }
      ]
    }
  },
  methods:{
    packagingdate(row){
      return common.timestampToTime(row.packagingdate)
    },
    search(){
      this.page = 1
      this.getData()
    },
    getData(){
      let options = {
        method:'get',
        url:'/packaging/historylist',
        params:{ ...this.formInline, ...{ page:this.page, rows:this.rowSize } }
      }
      this.tableLoading = true
      this.$axios(options).then(({ data }) => {
        this.tableData = data.records
        this.totalRows = data.total
        setTimeout(() => this.tableLoading = false, 500)
      })
    },
    // 获取打包单详情
    getPackagingDetail(row){
      let options = {
        method:'get',
        url:`/packaging/${row.id}`
      }
      this.$axios(options).then(({ data }) => {
        this.packagingDetail = {...row,...data}
        this.packagingDetailsPopupVisible = true
      })
    },
    handlePrint(){
      if(!this.tableRowSelected.length) return this.callbackMessage(this.$t('m.packaging.packValidate'))
      this.printId = this.tableRowSelected[0].id
      this.print()
    },
    // 详情页打印
    detailPrint(printId){
      let LODOP = getLodop()
      let options = {
        method:'post',
        url:'/printtemplate/query',
        data:{ids:[printId],templateName:'packingSubOrder'}
      }
      this.$axios(options).then(({data})=> {
        eval(data)
        LODOP.SET_PRINT_PAGESIZE(1, '52mm', '85mm', '')
        LODOP.PRINT()
        // LODOP.PREVIEW()
      })
    },
    // 打印
    print(){
      // console.log(this.packagingDetail)
      let LODOP = getLodop()
      let options = {
        method:'post',
        url:'/printtemplate/query',
        data:{ ids:[this.printId], templateName:'packing' }
      }
      this.$axios(options).then(({ data }) => {
        eval(data)
        // LODOP.PRINT_INITA(0,0,'50mm','85.01mm','打印设计')
        // LODOP.SET_PRINT_MODE('PRINT_NOCOLLATE',1)
        // LODOP.ADD_PRINT_TEXT(53,20,168,24,'JJ')
        // LODOP.SET_PRINT_STYLEA(0,'FontName','Myanmar3')
        // LODOP.SET_PRINT_STYLEA(0,'FontSize',7)
        // LODOP.ADD_PRINT_TEXT(73,20,165,20,'098630001')
        // LODOP.ADD_PRINT_TEXT(90,20,169,65,'စစ်ကိုင်းတိုင်းဒေသကြီး(实)   စစ်ကိုင်းခရိုင်   စစ်ကိုင်းမြို့ 生物工程')
        // LODOP.SET_PRINT_STYLEA(0,'FontName','Myanmar3')
        // LODOP.SET_PRINT_STYLEA(0,'FontSize',7)
        // LODOP.ADD_PRINT_TEXT(151,20,48,22,'MD')
        // LODOP.SET_PRINT_STYLEA(0,'FontSize',16)
        // LODOP.SET_PRINT_STYLEA(0,'Bold',1)
        // LODOP.ADD_PRINT_TEXT(170,20,79,21,'SA001')
        // LODOP.SET_PRINT_STYLEA(0,'FontSize',16)
        // LODOP.SET_PRINT_STYLEA(0,'Bold',1)
        // LODOP.ADD_PRINT_BARCODE(193,20,170,36,'128Auto','9092715')
        // LODOP.SET_PRINT_STYLEA(0,'FontSize',7)
        // LODOP.ADD_PRINT_TEXT(225,8,190,20,'2715-2-1')
        // LODOP.SET_PRINT_STYLEA(0,'FontName','微软雅黑')
        // LODOP.SET_PRINT_STYLEA(0,'FontSize',22)
        // LODOP.SET_PRINT_STYLEA(0,'Alignment',2)
        // LODOP.SET_PRINT_STYLEA(0,'Bold',1)
        // LODOP.ADD_PRINT_BARCODE(260,20,170,38,'128Auto','9092715-2-1')
        // LODOP.SET_PRINT_STYLEA(0,'FontSize',7)
        // LODOP.ADD_PRINT_TEXT(155,93,84,26,'PAID')
        // LODOP.SET_PRINT_STYLEA(0,'FontName','叶根友毛笔行书2.0版')
        // LODOP.SET_PRINT_STYLEA(0,'FontSize',22)
        // LODOP.SET_PRINT_STYLEA(0,'FontColor','#FF0000')
        // LODOP.ADD_PRINT_SETUP_BKIMG('')
        // LODOP.SET_SHOW_MODE('BKIMG_LEFT',83)
        // LODOP.SET_SHOW_MODE('BKIMG_TOP', 155)
        // LODOP.SET_SHOW_MODE('BKIMG_IN_PREVIEW',true)
        // LODOP.SET_SHOW_MODE('BKIMG_PRINT',true)
        // LODOP.NewPageA()
        // LODOP.SET_PRINT_MODE('PRINT_NOCOLLATE',1)
        // LODOP.ADD_PRINT_SETUP_BKIMG('')
        // LODOP.SET_SHOW_MODE('BKIMG_LEFT',83)
        // LODOP.SET_SHOW_MODE('BKIMG_TOP',155)
        // LODOP.SET_SHOW_MODE('BKIMG_IN_PREVIEW',true)
        // LODOP.SET_SHOW_MODE('BKIMG_PRINT',true)
        // LODOP.ADD_PRINT_TEXT(53,11,168,24,'0')
        // LODOP.SET_PRINT_STYLEA(0,'FontName','Myanmar3')
        // LODOP.SET_PRINT_STYLEA(0,'FontSize',7)
        // LODOP.ADD_PRINT_TEXT(73,11,165,20,'09691472583')
        // LODOP.ADD_PRINT_TEXT(90,12,169,65,'မန္တလေးတိုင်းဒေသကြီး   ကျောက်ဆည်ခရိုင်(市)   မြစ်သားမြို့ 按摩')
        // LODOP.SET_PRINT_STYLEA(0,'FontName','Myanmar3')
        // LODOP.SET_PRINT_STYLEA(0,'FontSize',7)
        // LODOP.ADD_PRINT_TEXT(151,12,48,22,'MD')
        // LODOP.SET_PRINT_STYLEA(0,'FontSize',16)
        // LODOP.SET_PRINT_STYLEA(0,'Bold',1)
        // LODOP.ADD_PRINT_TEXT(170,12,79,21,'AM001')
        // LODOP.SET_PRINT_STYLEA(0,'FontSize',16)
        // LODOP.SET_PRINT_STYLEA(0,'Bold',1)
        // LODOP.ADD_PRINT_BARCODE(193,17,190,36,'128Auto','9092713')
        // LODOP.SET_PRINT_STYLEA(0,'FontSize',7)
        // LODOP.ADD_PRINT_TEXT(229,8,190,20,'2713')
        // LODOP.SET_PRINT_STYLEA(0,'FontName','微软雅黑')
        // LODOP.SET_PRINT_STYLEA(0,'FontSize',22)
        // LODOP.SET_PRINT_STYLEA(0,'Alignment',2)
        // LODOP.SET_PRINT_STYLEA(0,'Bold',1)
        // LODOP.ADD_PRINT_BARCODE(260,15,190,38,'128Auto','9092713')
        // LODOP.SET_PRINT_STYLEA(0,'FontSize',7)
        // LODOP.ADD_PRINT_TEXT(155,93,84,26,'PAID')
        // LODOP.SET_PRINT_STYLEA(0,'FontName','叶根友毛笔行书2.0版')
        // LODOP.SET_PRINT_STYLEA(0,'FontSize',22)
        // LODOP.SET_PRINT_STYLEA(0,'FontColor','#FF0000')
        LODOP.SET_PRINT_PAGESIZE(1, '50mm', '85mm', '')
        LODOP.PRINT()
        // LODOP.PREVIEW()
        // LODOP.PRINT_DESIGN()
      })
    },
    // 打印送货单
    deliveryNotePrint(){
      if(!this.tableRowSelected.length) return this.callbackMessage(this.$t('m.packaging.packValidate'))
      let ordercode = this.tableRowSelected[0].ordercode
      let options = {
        method:'get',
        url:`/packagingsuborder/printorder`,
        params:{
          ordercode
        }
      }
      this.$axios(options).then(({data})=> {
        let tempData = data
        printInfo(tempData)
      })
    },
    // 表格过滤项
    stateFormatter(row){
      let result = this.stateOptions.find((item) => item.value === row.state)
      return result ? result.label : ''
    },
    ordertypeFormatter(row){
      let result = this.ordertypeOptions.find((item) => item.id === row.ordertype)
      return result ? result.label : ''
    }
  }
}
</script>
<style lang="scss" scoped>
</style>